<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书城首页</title>
<link type="text/css" rel="stylesheet" href="/static/css/style.css" >
</head>
<script src="static/script/jquery-1.7.2.js"></script>
<script>
	//先把 将某书加入购物车的span 隐藏， 当点击加入购物车再展示该信息
	$(function(){
		$(".book_add_btn").click(function(){
		  //获取要添加图书的id,先给每个btn按钮的id属性赋值为book.ID。
		  //$(this)表示当前的btn元素，attr表示获取他的某个属性 attr("id")获取id属性
		   var bookId = $(this).attr("id");
		   var url ="/addBook2Cart";
		   var params = {"bookId":bookId}
		   $.post(url,params,function(res){
			//将响应信息 设置到span中
			$("#bookMsg").text(res);
		   });
	}) ; 
	});
	     
</script>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="/static/img/logo.gif" >
			<span class="wel_word">网上书城</span>

			{{if .IsLogin}}
			<div>
				<span>欢迎<span class="um_span">{{.Username}}</span>光临尚硅谷书城</span>
				<a href="/logout">注销</a> &nbsp;&nbsp;
				<a href="/toCarts">购物车</a>
				<a href="/getMyOrder">我的订单</a>
				<a href="/pages/manager/manager.html">后台管理</a>
			</div>
			{{else}}
		        <div>
		     	<a href="/pages/user/login.html">登录</a> | 	
				 <a href="/toCarts">购物车</a>
				 <a href="/pages/manager/manager.html">后台管理</a>	
				</div>
			{{end}}
	</div>
	
	<div id="main">
		<div id="book">
			<div class="book_cond">
				<form action="/getBooksByPrice" method="post">
					价格：<input type="text" name="min"  value="{{.MinPrice}}" > 元 - 
					<input type="text" name="max" value="{{.MaxPrice}}"> 元 
					<button  >查询</button>
				</form> 
			</div>
			<div style="text-align: center">
				<span>您的购物车中有3件商品</span>
				<div>
					<span style="color: red" id="bookMsg"></span>
				</div>
			</div>
			{{range .Books}}
			<div class="b_list">
				<div class="img_div">
					<img class="book_img" alt="" src="{{.ImgPath}}" />
				</div>
				<div class="book_info">
					<div class="book_name">
						<span class="sp1">书名:</span>
						<span class="sp2">{{.Title}}</span>
					</div>
					<div class="book_author">
						<span class="sp1">作者:</span>
						<span class="sp2">{{.Author}}</span>
					</div>
					<div class="book_price">
						<span class="sp1">价格:</span>
						<span class="sp2">￥{{.Price}}</span>
					</div>
					<div class="book_sales">
						<span class="sp1">销量:</span>
						<span class="sp2">{{.Sales}}</span>
					</div>
					<div class="book_amount">
						<span class="sp1">库存:</span>
						<span class="sp2">{{.Stock}}</span>
					</div>
					<div class="book_add">
						{{if .Stock}}
						 <button id="{{.ID}}"class="book_add_btn">加入购物车</button>
					    {{else}}
						<span style="color: red;">小二拼命补货中</span>
						{{end}} 
						</div>
				</div>
			</div>
			{{end}}
		</div>
		
		<div id="page_nav">
			{{if .IsHasPrev}}
		<a href="/getBooksByPrice?min={{.MinPrice}}&max={{.MaxPrice}}">首页</a>
		<a href="/getBooksByPrice?pageNo={{.GetPrevPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">上一页</a>
		{{end}}
		【{{.PageNo}}】

		{{if .IsHasNext}}
		<a href="/getBooksByPrice?pageNo={{.GetNextPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">下一页</a>
		<a href="/getBooksByPrice?pageNo={{.TotalPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">末页</a>
		{{end}}
		共{{.TotalPageNo}}页,{{.TotalRecord}}条记录 
		到第<input value="{{.PageNo}}" name="pn" id="pn_input"/>页
		<input type="button" value="确定" id="stu">
		<script>
			$("#stu").click(function(){
				var pageNo = $("#pn_input").val();
			   location = "/getBooksByPrice?pageNo="+pageNo+"&min={{.MinPrice}}&max={{.MaxPrice}}";
			}); 
		</script>
		</div>
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>